<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        margin: 200px auto;
        width: 500px;
    }
    .one {
        display: inline-block;
        color: orange;
        width: 5em;
        text-align: center;
    }

    .two {
        display: inline-block;
        margin: 5px;
        width: 3.5em;
        background-color: orange;
        color: #fff;
        text-align: center;
    }
</style>

<body>

</body>
<script>

    function countDown() {
        var date = new Date()
        var y = date.getFullYear()//年
        var nowTime = +date; // 返回的是当前时间总的毫秒数
        var inputTime = +new Date(y + "-11-11"); // 返回的是当前年11月11日的总毫秒数
        var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
        var d = parseInt(times / 60 / 60 / 24); // 剩余的天
        d = d < 10 ? '0' + d : d;
        var h = parseInt(times / 60 / 60 % 24); //剩余的时
        h = h < 10 ? '0' + h : h;
        var m = parseInt(times / 60 % 60); // 剩余的分
        m = m < 10 ? '0' + m : m;
        var s = parseInt(times % 60); // 剩余的秒
        s = s < 10 ? '0' + s : s;
        return [d + '天', h + '时', m + '分', s + '秒']
    }
    console.log(countDown());
    var body = document.querySelector('body')
    var div =document.createElement('div')
    body.appendChild(div)
    for (var i = 0; i <= 3; i++) {
        var span = document.createElement('span')
        span.innerHTML = countDown()[i]
        if (i == 0) {
            span.className = 'one'
        }
        else {
            span.className = 'two'
        }
        div.appendChild(span)
    }
    setInterval(function () {

       div.children[0].innerHTML = countDown()[0]

       div.children[1].innerHTML = countDown()[1]

       div.children[2].innerHTML = countDown()[2]

       div.children[3].innerHTML = countDown()[3]

    }, 1000)
</script>

</html>